<template>
  <n-card :bordered="false" content-style="padding: 0">
    <n-form
      ref="formRef"
      :model="localQuery"
      label-placement="left"
      :show-feedback="false"
      inline
      size="small"
    >
      <n-grid cols="s:1 m:2 l:3 xl:4" :x-gap="20" :y-gap="20" responsive="screen">
        <n-form-item-gi label="菜单名称">
          <n-input v-model:value="localQuery.menuName" placeholder="请输入用户名" />
        </n-form-item-gi>

        <n-form-item-gi label="状态">
          <n-select
            v-model:value="localQuery.status"
            placeholder="请选择状态"
            :options="dicts.sys_normal_disable"
            clearable
          />
        </n-form-item-gi>

        <n-form-item-gi>
          <n-space>
            <n-button type="primary" @click="onSearch">查询</n-button>
            <n-button @click="onReset">重置</n-button>
          </n-space>
        </n-form-item-gi>
      </n-grid>
    </n-form>
  </n-card>
</template>

<script lang="ts" setup>
import { useDict } from '@/hooks/useDict';
import type { FormInst } from 'naive-ui';
import { reactive, useTemplateRef, watch } from 'vue';

interface Props {
  query: Record<string, any>;
}

const props = defineProps<Props>();
const emit = defineEmits(['search', 'reset']);
const formRef = useTemplateRef<FormInst>('formRef');
const localQuery = reactive({ ...props.query });
const { dicts } = useDict('sys_normal_disable');

// 当外部 query 改变（如分页重置）时，同步
watch(
  () => props.query,
  (val) => Object.assign(localQuery, val),
);

const onSearch = () => emit('search', { ...localQuery });
const onReset = () => {
  Object.keys(localQuery).forEach((key) => (localQuery[key] = null));
  emit('reset');
};
</script>

<style lang="less" scoped></style>
